<template>
  <section class="todoapp">
    <TodoHeader :list="newList" @addItem="addItemFn"></TodoHeader>
    <TodoMain
      :item="item"
      @delItem="delItemFn"
      v-for="item in newList"
      :key="item.id"
    ></TodoMain>
    <TodoFooter
      @changeType="changeTypeFn"
      :list="newList"
      @delDone="delDoneFn"
    ></TodoFooter>
  </section>
</template>

<script>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import "./styles/index.css";
import "./styles/base.css";
// 样式引入 + 导入组件并注册使用
export default {
  components: {
    TodoFooter,
    TodoHeader,
    TodoMain,
  },

  data() {
    return {
      list: [
        {
          id: 100,
          name: "吃饭",
          isDone: true,
        },
        {
          id: 201,
          name: "睡觉",
          isDone: false,
        },
        {
          id: 103,
          name: "打豆豆",
          isDone: true,
        },
      ],

      type: "allList",
    };
  },

  methods: {
    changeTypeFn(type) {
      this.type = type;
    },

    delDoneFn() {
      this.list = this.list.filter((item) => !item.isDone);
    },

    delItemFn(id) {
      this.list = this.list.filter((item) => item.id != id);
    },

    addItemFn(content) {
      this.list.push({
        id: +new Date(),
        name: content,
        isDone: false,
      });
    },
  },

  computed: {
    newList() {
      if (this.type === "allList") {
        return this.list;
      }
      if (this.type === "NoDoneList") {
        return this.list.filter((item) => !item.isDone);
      }
      if (this.type === "DoneList") {
        return this.list.filter((item) => item.isDone);
      }
    },
  },
};
</script>
